<!--这是菜单页面-->
<template>
  <beautiful-input width="200px" height="5px" placeholder="搜索物品" v-model="init.searchValue"
                   @myblur="init.search()" @keyup.enter="init.search()"></beautiful-input>
  <div class="c__menu">
    <div class="tree">
      <a-collapse class="menu_list" v-model:activeKey="init.activeKey" ghost>
        <a-collapse-panel v-for="(item, index) in init.menu" style="text-align: center;font-family: ysbth,serif" :key="item.id"
                          :header="item.type_name">
          <div class="scroll">
            <div v-for="(it, index) in item.child">
              <simple-button class="list-button" :class="{ listActive:it.isActive}" style="width: 180px; font-family: ysbth,serif ;margin-bottom: 5px" :title="it.li.nickname"
                             @click="init.showModal(it)"></simple-button>
            </div>
          </div>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <div class="content">
      <detail-view v-if="init.open" :item="init.currentItem"></detail-view>
      <div v-if="init.searchOpen">
        搜索结果：
        <div v-if="init.searchListOpen" style="margin-bottom: 20px;">
          <div v-for="item in init.searchChildList.li">
            <simple-button style="margin-top: 10px;" :title="`${item.li.nickname}`"
                           @click="init.selectItem(item)"></simple-button>
          </div>
        </div>
        <span v-for="(item, index) in init.searchList" style="">
          <a class="page" :class="{_active:item.isActive}" @click="init.selectPageItem(item)" style="">{{ index }}</a>
        </span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {reactive} from "vue";
import SimpleButton from "@/components/vue_components/button/SimpleButton.vue";
import {post} from "@/common";
import DetailView from "@/view/DetailView.vue";
import BeautifulInput from "@/components/BeautifulInput.vue";


const init = (() => {
  const getModTypeDataSource = async () => {
    s.modTypeDataSource = await post("v1/mod/type/get", {})
  }
  const getModItemDataSource = async () => {
    s.modItemDataSource = await post("v1/mod/get", {})
  }
  const getMenuDataSource = async () => {
    s.menu = s.modTypeDataSource.map(item => ({
      ...item,
      child: []
    }))
    s.modItemDataSource.forEach(item => {
      s.menu.find(it => it.type_name === item.type)?.child.push({ li: item, isActive:false})
    })
  }
  const initModDataSource = async () => {
    await getModTypeDataSource()
    await getModItemDataSource()
    await getMenuDataSource()
  }
  const showModal = async (it) => {
    s.menu.map(item=>{
      item.child.map(i=>i.isActive = false)
    })
    s.searchOpen = false
    s.currentItem = it.li
    it.isActive = true
    s.open = true;
  };
  const selectItem = (item) => {
    const i = item.li
    let type = s.menu.find(it => i.type === it.type_name)
    s.activeKey = type.id
    showModal(item)
    return;
  }
  //搜索方法
  const search = async () => {
    s.searchOpen = false
    s.open = false
    s.searchList = <any>[]
    const a = <any>[]
    s.menu.map(item=>{
      if (s.searchValue.length === 0) {
        return
      }
      item.child.map(it=>{
        if (it.li.nickname.includes(s.searchValue)) {
          a.push(it)
        }
      })
    })
/*    s.modItemDataSource.map(item => {
      if (s.searchValue.length === 0) {
        return
      }
      if (item.nickname.includes(s.searchValue)) {
        a.push(item)
      }
    })*/
    for (let i = 0; i < a.length; i += 5) {
      let it = {
        li:a.slice(i, i + 5),
        isActive:false
      }
      s.searchList.push(it)
    }
    s.searchOpen = true
    //分页第一页
    selectPageItem(s.searchList[0])
  }
  //分页方法
  const selectPageItem = item => {
    s.searchList.map(it=>it.isActive = false)
    s.searchChildList = item
    item.isActive = true
    s.searchListOpen = true

  }
  const s = reactive({
    searchValue: "",
    searchOpen: false,
    searchList: <any>[],
    searchChildList: <any>[],
    searchListOpen: false,
    currentItem: {},
    modTypeDataSource: <any>[],
    modItemDataSource: <any>[],
    //菜单填这里
    menu: <any>[],
    activeKey: ["1"],
    open: false,
    showModal,
    search,
    selectItem,
    selectPageItem
  });
  initModDataSource()
  return s;
})();
</script>
<style scoped lang="less">
.c__menu {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 14px;
  margin-top: 30px;
  overflow: hidden;
}

.tree {
  width: 230px;
  overflow-x: hidden;
  overflow-y: auto;
}
.scroll{
  max-height: 200px;
  width: 210px;
  overflow-x: auto;
  overflow-y: scroll;
}
/* 滚动条的宽度 */
*::-webkit-scrollbar {
  width: 10px;
}

/* 滚动条轨道的样式 */
*::-webkit-scrollbar-track {
  background: #ffffff; /* 轨道颜色 */
  border-radius: 10px; /* 轨道圆角 */
}

/* 滚动条滑块的样式 */
*::-webkit-scrollbar-thumb {
  background: linear-gradient(to right, #FFC0CB, #FF69B4); /* 从左到右的渐变粉色 */
  border-radius: 10px; /* 滑块圆角 */
  transition: background 0.3s; /* 平滑过渡效果 */
}

/* 鼠标悬停时滑块的样式 */
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to right, #FF8080, #FF1493); /* 悬停时的渐变粉色 */
}

/* 滚动条滑块：窗口或标签页处于活动状态时 */
*::-webkit-scrollbar-thumb:active {
  background: linear-gradient(to right, #FF6347, #FF003F); /* 活动状态时的渐变粉色 */
}

.content {
  padding: 10px;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}
.content {
  padding: 30px;
  --angle: 0deg;
  border-bottom: 1px solid;
  border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
  animation: 3s rotate9234 linear infinite;
  overflow-x: hidden;
  overflow-y: auto;
}

@keyframes rotate9234 {
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.page {
  border: 1px solid;
  padding: 5px;
  &._active {
    background: greenyellow;
  }
}

.page:hover {
  cursor: pointer;
}
.list-button{
  &.listActive{
    color: white;
    background-color: black;
  }
}

.menu_list {
  max-height: 600px;
  width: 237px;
  background: transparent;
  overflow-x: hidden;
  overflow-y: scroll;
}
</style>
